import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: Scaffold(
    // 使用自定义组件的地方：给组件传递一个值
    body: CustomStateFulComp(count: 10)
  )));
}

// 自定义组件：无状态组件，有状态组件
// 1.无状态组件,前提得满足是一个组件(Widget),还得满足无状态组件(StatelessWidget)
// 在StatelessWidget抽象类中有一个builde方法被@protected修饰了，表示实现这个类必须要实现这个方法
class CustomStateLessComp extends StatelessWidget {
  const CustomStateLessComp({super.key});
  @override
  // Widget是类型  buidle是函数方法  context是自带的参数  BuildContext是context的类型
  Widget build(BuildContext context) {
    // 无状态组件的UI就是靠build来进行构建
    return GestureDetector(
      child: Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey, width: 2),
        ),
        child: Icon(Icons.add, size: 100),
      ),
      // 点击1次，N次
      onTap: () {
        // 弹层提示
        showDialog(
          context: context,
          builder: (context) {
            return AlertDialog(content: Text('我是弹出层'));
          },
        );
      },
    );
  }
}
// 2.有状态组件(包含生命周期)
// 实现StatefulWidget抽象类，实现createState方法
// 2.1基本组件
class CustomStateFulComp extends StatefulWidget {
  // 接受第一步：准备一个存放数据的变量
  final int count;
  // 接收第二步：构造函数进行接收赋值(required表示必须传递这个参数，如果可传可不传就给默认值)
  const CustomStateFulComp({super.key,required this.count});
  // 有状态组件不是要构建UI了，还是要写生命周期
  @override
  State<CustomStateFulComp> createState(){
    // print('1.createState');
    return _CustomStateFulComp();
  }
  
}
// 2.2实现组件
class _CustomStateFulComp extends State<CustomStateFulComp>{
  // 数据的地方：UI更新的变量
  int count = 0;
  // 生命周期初体验（初始化生命周期）
  @override
  void initState() {
    // 必须保留super.initState(),必须先执行父组件的生命周期，才能执行子的
    super.initState();
    // widget就是基本组件(前提：实现组件必须实现了基本组件)
    count = widget.count;
    // TODO：调接口发请求拿数据，类似鸿蒙的aboutToAppear,类似Vue的Created
  }
  // @override
  // void didChangeDependencies() {
  //   // TODO: implement didChangeDependencies
  //   super.didChangeDependencies();
  // }
  // @override
  // void setState(VoidCallback fn) {
  //   // TODO: implement setState
  //   super.setState(fn);
  // }
  // @override
  // void didUpdateWidget(covariant CustomStateFulComp oldWidget) {
  //   // TODO: implement didUpdateWidget
  //   super.didUpdateWidget(oldWidget);
  // }
  // @override
  // void deactivate() {
  //   // TODO: implement deactivate
  //   super.deactivate();
  // }
  // @override
  // void dispose() {
  //   // TODO: implement dispose
  //   super.dispose();
  // }
  // UI的结构：自定义组件or系统组件
  @override
  Widget build(BuildContext context) {
    return Column(
        // children允许放置多个子组件
        // child只允许放置一个子组件
        children: [
          Text('我是一个有状态组件$count'),
          TextButton(onPressed: (){
            //  按钮的点击事件
            // 如果希望数据发生变化UI产生更新，使用setState进行包裹修改数据
            setState(() {
              count++;
            });
            showDialog(context: context, builder: (context){
              return AlertDialog(
                content: Text('当前count的值：$count'),
              );
            });
          }, child: Text('+'))
        ],
    );
  }
}


// 组件生命周期
// 1.无状态组件-只有一个周期就是build
// 2.有状态组件-
// 创建
// 2.1 - creatState(){} 创建数据
// 2.2 - initState(){} 初始化数据

// 更新
// didChangeDependencies 更新数据的依赖项

// 构建
// 2.3 - build(){} 首次构建UI界面
// 2.4 - setState(){} 数据发生变化UI产生更新
// 2.5 - didUpdateWidget()组件重载

// 销毁
// 2.6 - deactivate(){} 组件失活
// 2.7 - dispose(){}  组件销毁